import React, { useEffect, useState, useRef } from 'react';
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { backgroundObj, loginData } from '@/utils/utils'
import Tabs from '@/components/Tabs'
import { fetchListGoods } from '@/server/shop';
import Router from '@/utils/router'
import { AtSearchBar } from 'taro-ui'
import "taro-ui/dist/style/components/search-bar.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/icon.scss";
import './index.scss';

const commodity = (props) => {
  const { params } = getCurrentInstance().router
  const { } = params
  const { organizationId = '1' } = loginData() || {}
  const [data, setData] = useState([])
  const [page, setPage] = useState({
    page: '1',
    limit: 10,
    goodsName: ''
  })
  const [activeKey, setActiveKey] = useState('offline')
  const [tabs, setTabs] = useState([
    {
      label: '服务课程',
      value: 'serviceList',
      key: 'service',
    }, {
      label: '周边课程',
      value: 'offlineGoodsList',
      key: 'offline'
    }, {
      label: '单场直播',
      value: 'directLiveList',
      key: 'directLive'
    }, {
      label: '点播课程',
      value: 'videoCourseList',
      key: 'videoCourse'
    }, {
      label: '直播课程',
      value: 'liveCourseList',
      key: 'liveCourse',
    },
    {
      label: '面授课程',
      value: 'faceToFaceList',
      key: 'faceToFace'
    },
  ])
  const setPageUp = () => {
    setPage({
      ...page,
      page: page.page + 1
    })
  }
  useReachBottom(() => {
    setPageUp()
  })
  useEffect(() => {
    fetchData()
  }, [page])
  const CommodityCard = (props) => {
    const { data } = props
    const { goodsName, price, cover, priceType, id } = data
    return <View className='commodityCard_box' onClick={() => Router('shopDetail', { args: { goodsId: id } })}>
      <View className='commodityCard_profile' style={backgroundObj(cover.split(','))}></View>
      <View className='commodityCard_title font_noHide'>{goodsName}</View>
      <View className='commodityCard_price'>{priceType === 'free' ? '免费' : '￥' + price}</View>
    </View>
  }
  const fetchData = () => {
    fetchListGoods({
      organizationId, ...page, goodsType: activeKey,
      goodsName: page.goodsName
    }).then(e => {
      const type = tabs.reduce((item, val) => {
        if (val.key === activeKey) {
          return val.value
        }
        return item
      }, '')
      setData([...data, ...e[type]])
    })
  }
  return (
    <View className='commodity_box'>
      <AtSearchBar onChange={(e) => {
        setPage(() => {
          setData([])
          return {
            page: 1,
            limit: 10,
            goodsName: e
          }
        })
      }} value={page.goodsName}></AtSearchBar>
      {/* <AtSearchBar
        value={page.goodsName}
        onChange={(e) => {
          setPage(() => {
            setData([])
            return {
              page: 1,
              limit: 10,
              goodsName: e
            }
          })
        }}
      /> */}
      <Tabs onChange={(e) => {
        setActiveKey(() => {
          setPage({
            ...page,
            page: 1
          })
          setData([])
          return e
        })
      }} list={tabs.map(item => {
        return {
          label: item.label,
          value: item.key
        }
      })} activeKey={activeKey}>
      </Tabs>
      <View className='commodity_data_info'>
        {data.map((item, index) => {
          return <CommodityCard key={index} data={item}></CommodityCard>
        })}
      </View>
    </View>
  )
}
export default commodity